<!DOCTYPE HTML>
<html th:with="title='编辑传媒产品'">
<head th:include="fragments/UEheader :: header">
</head>
<body id="app">
	<div class="page-container">
		<form action="/manager/media/update" method="post" class="form form-horizontal" id="media-form">
			<input type="hidden" name="id" v-model="media.id" />
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					标题：
				</label>
				<div class="formControls col-xs-3 col-sm-3">
					<input type="text" class="input-text size-L" v-model="media.title" id="title" name="title">
				</div>
			</div>
			<div v-if="media.backgroundType == 1" class="row cl">
				<label class="form-label col-xs-4 col-sm-3">简介：</label>
				<div class="formControls col-xs-3 col-sm-3">
					<input type="text" class="input-text size-L" v-model="media.introduction" id="introduction" name="introduction">
				</div>
			</div>
			<div id="backgroundImgTxt" class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					背景规格：
				</label>
				<div class="formControls col-xs-2 col-sm-2 skin-minimal">
					<div class="radio-box">
						<input name="titleType" type="radio" id="max" value="max">
						<label>大图</label>
					</div>
					<div class="radio-box">
						<input name="titleType" type="radio" id="med" value="med">
						<label>中图</label>
					</div>
					<div class="radio-box">
						<input name="titleType" type="radio" id="min" value="min">
						<label>小图</label>
					</div>
				</div>
			</div>
			<div id="backgroundTxt" class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					背景规格：
				</label>
				<div class="formControls col-xs-2 col-sm-2 skin-minimal">
					<div class="radio-box">
						<input name="titleType" type="radio" id="max" value="max">
						<label>大图</label>
					</div>
					<div class="radio-box">
						<input name="titleType" type="radio" id="med" value="med">
						<label>中图</label>
					</div>
				</div>
			</div>
			<div id="backgroundcolor" class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					背景颜色：
				</label>
				<div class="formControls col-xs-3 col-sm-3 skin-minimal">
					<div class="radio-box">
						<input name="backgroundContent" type="radio" id="MediumSeaGreen" value="#3CB371">
						<label for="MediumSeaGreen">绿色</label>
					</div>
					<div class="radio-box">
						<input name="backgroundContent" type="radio" id="DarkViolet" value="#9400D3">
						<label for="DarkViolet">紫色</label>
					</div>
					<div class="radio-box">
						<input name="backgroundContent" type="radio" id="LightCoral" value="#F08080">
						<label for="LightCoral">红色</label>
					</div>
					<div class="radio-box">
						<input name="backgroundContent" type="radio" id="Chocolate" value="#D2691E">
						<label for="Chocolate">橙色</label>
					</div>
				</div>
			</div>
			<div id="backgroundImags" class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					背景图：
				</label>
				<input type="hidden" id="backgroundImg" name="backgroundContent">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker" class="btn btn-primary size-L radius ">选择文件</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					产品详情：
				</label>
				<div class="formControls col-xs-8 col-sm-8">
					<!-- 加载编辑器的容器 -->
					<script id="container" name="particulars" v-model="media.particulars" style="width: 1100px; height: 350px" type="text/plain">
        		</script>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">在设备上开启：</label>
				<div class="formControls col-xs-3 col-sm-3">
					<label>已开启设备(双击左右选择)</label>
					<span class="select-box">
						<select class="select size-S" id="userGroupIds" name="userGroupIds" multiple="multiple" size="6">
						</select>
					</span>
					<label>按住ctrl键，单击选择多项</label>
				</div>
				<div class="formControls col-xs-1 col-sm-1" style="height: 100%;">
					<label>&nbsp;</label>
					<label class="form-label">
						<input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_rightAll" value=">>" />
					</label>
					<label class="form-label">
						<input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_rightSelected" value=">" />
					</label>
					<label class="form-label">
						<input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftSelected" value="<" />
					</label>
					<label class="form-label">
						<input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftAll" value="<<" />
					</label>
				</div>
				<div class="formControls col-xs-3 col-sm-4">
					<label>待开启设备(双击左右选择)</label>
					<span class="select-box">
						<select class="select size-S" id="userGroupIds_to" multiple="multiple" size="6">
							<!-- <option th:each="device:${devices}" th:value="${device.id}" th:text="${device.deviceName}"></option> -->
						</select>
					</span>
					<label>按住ctrl键，单击选择多项</label>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary size-L radius" type="submit" value="提交">
					<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		var deviceId = "";
		var ue = UE.getEditor('container');

		var app = new Vue({
			el : '#app',
			data : {
				media : []
			}
		});
		function closeWin() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
		//获取当前所有设备
		function loadDevice() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "GET",
				url : '/manager/device/findAll',
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						for (var i = 0; i < data.length; i++) {
							deviceId += data[i].id + ",";
						}
						for (var a = 0; a < data.length; a++) {
							if (data[a].status != "passApproval") {
								data.splice(a, 1);
							}
						}
						for (var i = 0; i < data.length; i++) {
							$("#userGroupIds_to").append("<option value="+data[i].id+">" + data[i].deviceName + "</option>");
						}
						//获取营销数据
						get();
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		$(function() {
			/* 初始化单选框样式 */
			$('.skin-minimal input').iCheck({
				checkboxClass : 'icheckbox-blue',
				radioClass : 'iradio-blue',
				increaseArea : '20%'
			});
			loadDevice();
			$('#userGroupIds').multiselect({
				submitAllLeft : false,
				submitAllRight : false
			});
			$("#media-form").validate({
				rules : {
					background : {
						required : true
					},
					title : {
						required : true
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var data = $('#media-form').serialize();
					var selectedGroups = $("#userGroupIds").find("option");
					for (var j = 0; j < selectedGroups.length; j++) {
						data += "&device[" + j + "]=" + $(selectedGroups[j]).prop("value");
					}
					$.ajax({
						type : "POST",
						url : '/manager/media/update',
						data : data,
						beforeSend : function() {

						},
						complete : function() {

						},
						error : function(request) {
							layer.alert("系统出错");
						},
						success : function(data) {
							if (data.status == 0) {
								refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});
		function getIdFromUrl() {
			var addr = location.href;
			var index = addr.lastIndexOf('/') + 1;
			var id = addr.substr(index);
			return id;
		}
		//获取当前营销详情
		function get() {
			var id = getIdFromUrl();
			$.ajax({
				type : "POST",
				url : '/manager/media/get/' + id,
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					alert("Connection error");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						//产品描述
						if (data.particulars != null) {
							ue.ready(function() {
								ue.setContent(data.particulars);
							});
						}
						//图文模式
						if (data.backgroundType == "0") {
							$("#backgroundcolor").remove();
							$("#backgroundTxt").remove();
							$("#fileList").append("<img src='"+data.backgroundContent+"'  width='100' height='100'>");
							$("#backgroundImg").val(data.backgroundContent);
						}
						//纯文模式
						if (data.backgroundType == "1") {
							$("#backgroundImgTxt").remove();
							$("#backgroundImags").remove();
							if (data.backgroundContent == $("#MediumSeaGreen").val()) {
								$("#MediumSeaGreen").iCheck('check');
							}
							if (data.backgroundContent == $("#DarkViolet").val()) {
								$("#DarkViolet").iCheck('check');
							}
							if (data.backgroundContent == $("#LightCoral").val()) {
								$("#LightCoral").iCheck('check');
							}
							if (data.backgroundContent == $("#Chocolate").val()) {
								$("#Chocolate").iCheck('check');
							}
						}
						//当前传媒绑定的设备
						for (var i = 0; i < data.device.length; i++) {
							$("#userGroupIds_to").find("option[value='" + data.device[i].id + "']").appendTo($("#userGroupIds"));
						}
						if (data.titleType == "max") {
							$("#max").iCheck('check');
						}
						if (data.titleType == "med") {
							$("#med").iCheck('check');
						}
						if (data.titleType == "min") {
							$("#min").iCheck('check');
						}
						app.media = data;
					}
				}
			});
		}
	</script>
</body>
</html>